<template>
  <!-- 产品分类导航 -->
  <view class="wrap" v-if="content">
    <!-- 导航栏 -->
    <shopro-navbar :isBack="true">
      <view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
        <view style="font-weight:bold">全部服务</view>
      </view>
    </shopro-navbar>
    <view class="menu-category-box u-m-b-20" v-for="(item_content,index) in content" :key="index">
      <view class="titles">
        {{item_content.title}}
      </view>
      <view class="menu-tab-box u-flex u-flex-wrap">
        <view
            class="tab-list u-flex-col u-col-center u-row-center"
            :style="{ width: 100 / 5 + '%' }"
            v-for="(item, indexs) in  item_content.cate"
            :key="item.store_cate_id"
            @click="toPath(item)"
        >
          <image class="tab-img" :src="item.logo_image"></image>
          <text class="">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * shGridSwiper-滑动宫格列表
 * @property {Array} list - 列表数据
 * @property {Number|String} oneRowNum - 单行数量
 */
export default {
  components: {},
  data() {
    return {
      categoryCurrent: 0 ,//分类轮播下标
      "content": [],
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    oneRowNum: {
      type: [Number, String],
      default: 5
    }
  },
  computed: {
    // newList() {
    //   if (this.list.length) {
    //     let data = this.$tools.splitData(this.list, this.oneRowNum * 2);
    //     return data;
    //   }
    // }
  },
  onLoad(option){
	  console.log(option)
	  this.type=option.type
  },
  created(){
    this.getAllServe()
  },
  methods: {
	  toPath(item){
      uni.navigateTo({
        url: '/pages/index/food?store_cate_id=' + item.store_cate_id + "&title=" + item.name
      })
	  },
    async getAllServe() {
      let that = this;
      that.$https(
          'category.serve',
      )
      .then(res => {
        if (res.code === 1) {
            this.content = res.data;
        }
      });
    },
    jump(path, query) {
      this.$Router.push({
        path: path,
        query: query
      });
    }
  }
};
</script>

<style lang="scss">
page{
		  background:#ffffff;
}
.wrap{
  background:#f1f1f1;
  height: 100%;
}
// 产品分类
.menu-category-box{
  position: relative;
  background: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding-top: 20rpx;
.titles{
font-size: 32rpx;
font-weight: 600;
margin-left: 18rpx;
}
.menu-tab-box {
.tab-list {
font-size: 26rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
margin: 20rpx 0;
.tab-img {
 width: 72rpx;
 height: 72rpx;
  margin-bottom: 10rpx;
}
}
}

.menu-category-dots {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10rpx;

.category-dot {
width: 12rpx;
height: 12rpx;
background: #eeeeee;
border-radius: 50%;
margin-right: 10rpx;
}

.category-dot-active {
width: 12rpx;
height: 12rpx;
background: #e9b461;
border-radius: 50%;
margin-right: 10rpx;
}
}
}
</style>
